<template>
	<xbd-pages-content title="人员详情">
		<template #content>
			<view class="peopledetail">
				<view class="card">
					<view class="avatar" @click="getpage">
						<image class="avatar-img" :src="info.avatar | imgFormat" mode=""></image>
						<view
						class="avatar-tab"
						:style="info.type === '黑名单' ? {background: '#394954', color: '#fff'} : {background: '#FAC52B', color: '#394954'} "
						>{{ info.type }}</view>
					</view>
					<view class="box">
						<view class="line"><view class="key">姓名</view><view class="content">{{ info.name || '-' }}</view></view>
						<view class="line" v-if="info.type === '黑名单'"><view class="key">来源</view><view class="content">{{ info.company || info.department || info.station || '-' }}</view></view>
						<view class="line" v-if="info.type === '访客'">
							<view class="key">单位</view>
							<view class="content">{{ (info.company+ '/' + info.department) === '-/-' ? '-' : info.company+ '/' + info.department }}</view>
						</view>
						<view class="line" v-if="info.type === '访客'"><view class="key">被访人</view><view class="content">{{ info.interviewee || '-' }}</view></view>
						<view class="line" v-if="info.type === '内部'"><view class="key">部门</view><view class="content">{{ info.company + '/' + info.department || '-' }}</view></view>
						<view class="line" v-if="info.type === '内部'"><view class="key">岗位/职位</view><view class="content">{{ info.station || '-' }}</view></view>
						<view class="line"><view class="key">电话</view><view class="content">{{ info.tpl || '-' }}</view></view>
						<view class="line" v-if="info.type === '黑名单'"><view class="key">身份证</view><view class="content">{{ info.IDcard || '-' }}</view></view>
						<view class="line" v-if="info.type !== '黑名单'"><view class="key">身份证</view><view class="content">{{ info.IDcard || '-' | IDCardFormat }}</view></view>
						<view class="line"><view class="key">车牌号</view><view class="content">{{ info.IDcar || '-' }}</view></view>
					</view>
				</view>
			</view>
		</template>
	</xbd-pages-content>
</template>

<script>
	import { Person, Vehicle } from '@/api/index.js';
	export default {
		data() {
			return {
				title: '',
				info: {
					name: '',
					type: '',
					tpl: '',
					IDcard: '',
					IDcar: '',
					department: '',
					station: '',
					avatar: '',
					interviewee: '',
					company: ''
				}
			};
		},
		methods: {
			getpage() {
				this.$store.commit('addErrorPage')
			},
			// 人员管理详情
			async getPersonInfo(id) {
				this.$showLoading('加载中');
				try {
					const res = await Person.getPersonPassDetail(id);
					console.log(res,'人员res')
					if(res.success) {
						const data = res.data.data;
						this.info.name = data.pass_name;
						this.info.type = data.pass_type === '访客' ? '访客' : '内部';
						this.info.tpl = data.pass_phone;
						this.info.IDcard = data.pass_idcard;
						this.info.IDcar = data.pass_plate;
						this.info.department = data.pass_department;
						this.info.station = data.pass_job;
						this.info.avatar = data.pass_avatar;
						this.info.interviewee = data.pass_interviewee_name;
						this.info.company = data.pass_company;
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			},
			// 车辆管理详情
			async getVehicleInfo(id) {
				this.$showLoading('加载中');
				try {
					const res = await Vehicle.getVehiclePassDetail(id);
					if(res.success) {
						const data = res.data.data;
						this.info.name = data.pass_name;
						this.info.type = data.pass_type === '访客' ? '访客' : '内部';
						this.info.tpl = data.pass_phone;
						this.info.IDcard = data.pass_idcard;
						this.info.IDcar = data.pass_plate;
						this.info.department = data.pass_department;
						this.info.station = data.pass_job;
						this.info.avatar = data.pass_avatar;
						this.info.interviewee = data.pass_interviewee_name;
						this.info.company = data.pass_company;
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			},
			// 人员名单详情
			async getPersonListInfo(id) {
				this.$showLoading('加载中');
				try {
					const res = await Person.getPersonListInfo(id);
					if(res.success) {
						const data = res.data.data;
						this.info.name = data.list_name;
						this.info.type = data.list_type === '访客' ? '访客' : '内部';
						if (~this.title.indexOf('黑')) {
							this.info.type = '黑名单';
						}
						this.info.tpl = data.list_phone;
						this.info.IDcard = data.list_idcard;
						this.info.IDcar = data.list_plate;
						this.info.department = data.list_department;
						this.info.avatar = data.list_avatar;
						this.info.company = data.list_company;
						this.info.station = data.list_job;
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			},
			// 车辆名单详情
			async getVehicleListInfo(id) {
				this.$showLoading('加载中');
				try {
					const res = await Vehicle.getVehicleListInfo(id);
					if(res.success) {
						const data = res.data.data;
						this.info.name = data.list_name;
						this.info.type = data.list_inout === 'internal' ? '内部' : '访客';
						if (~this.title.indexOf('黑')) {
							this.info.type = '黑名单';
						}
						this.info.tpl = data.list_phone;
						this.info.IDcard = data.list_idcard;
						this.info.IDcar = data.list_plate;
						this.info.department = data.list_department;
						this.info.avatar = data.list_avatar;
						this.info.company = data.list_company;
						this.info.station = data.list_job;
					}
					uni.hideLoading();
				} catch(e) {
					uni.hideLoading();
				}
			}
		},
		onLoad(res) {
			// 发请求
			this.title = res.title;
			if(res.title === '人员管理') {
				this.getPersonInfo(res.id);
			} else if(res.title === '车辆管理') {
				this.getVehicleInfo(res.id);
			} else if(res.title === '人员白名单' || res.title === '人员黑名单') {
				this.getPersonListInfo(res.id);
			} else if(res.title === '车辆白名单' || res.title === '车辆黑名单') {
				this.getVehicleListInfo(res.id);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.peopledetail {
		position: relative;
		
		width: 750rpx;
		height: 175px;
		background: url(../../static/images/common/detailbg.png);
		.card {
			position: absolute;
			top: 114px;
			left: 50%;
			
			width: 650rpx;
			height: 437px;
			border-radius: 20rpx;
			transform: translateX(-50%);
			
			background-color: #FFFFFF;
			.avatar {
				position: absolute;
				
				width: 160rpx;
				height: 160rpx;
				top: -80rpx;
				left: 50%;
				transform: translateX(-50%);
				&-img {
					width: 160rpx;
					height: 160rpx;
					border-radius: 50%;
					overflow: hidden;
				}
				&-tab {
					position: absolute;
					top: 8px;
					right: -70rpx;
					width: 96rpx;
					height: 22px;
					line-height: 22px;
					text-align: center;
					border-radius: 20rpx;
					
					font-size: 28rpx;
				}
			}
			.box {
				margin-top: 80px;
				padding: 0 70rpx;
				.line {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-bottom: 20px;
					border-bottom: 1px solid #F8F8F8;
					margin-bottom: 20px;
					
					font-size: 16px;
					box-sizing: border-box;
					&:nth-last-child(1) {
						border-bottom: none;
					}
					.key {
						width: 170rpx;
						color: #999999;
						text-align: left;
						overflow: hidden;/*超出部分隐藏*/
						text-overflow:ellipsis;/* 超出部分显示省略号 */
						white-space: nowrap;/*规定段落中的文本不进行换行 */
					}
					.content {
						width: 400rpx;
						color: $uni-text-color;
						text-align: right;
						overflow: hidden;/*超出部分隐藏*/
						text-overflow:ellipsis;/* 超出部分显示省略号 */
						white-space: nowrap;/*规定段落中的文本不进行换行 */
					}
				}
			}
		}
	}
</style>
